<template>
	<div class="ebookBookmark-wrapper" ref="ebookmark">
		<div class="ebookBookmark-content">
			<span :class="{'up':actualOffsetY >= burreyHeight}" class="ebookBookmark-content-flag el-icon-bottom">
				
			</span>
			<span class="ebookBookmark-content-text">
				{{markText}}
			</span>
		</div>
		<div v-if="settingVisible !== 3" class="ebookBookmark-component" :style="isFixed ? handleFixedStyle : {}">
			<book-mark :width="14" :height="ebookmarkHeight" :color="markColor"></book-mark>
		</div>
		
	</div>
</template>

<script>
	import { ebookMixin } from '../../utils/mixin.js';
	import {pxTorem} from '@/utils/common.js';
	import {getBookObjectProperty,setBookObjectProperty} from '@/utils/localstorage.js';
	import bookMark  from '@/components/common/bookMark.vue';
	export default {
		props:{
			actualOffsetY: {
				type: Number,
				default:0
			}
		},
		name: 'ebookBookmark',
		mixins: [ebookMixin],
		components:{
			bookMark
		},
		data() {
			return {
				initColor: '#DAE3CE',
				changeColor: '#70973F',
				ebookmarkHeight: 60,
				markText: '',
				markColor: '',
				burreyHeight: 70  ,// 第三阶段的临界高度,
				isFixed: false,
				canChange:false // 是否能够改变状态 超过第三阶段的临界高度即可改变高度
			}
		},
		watch:{
			isBookMark(val) {
				this.isFixed = val
				this.markColor = val ? this.changeColor : this.initColor
			},
			
			actualOffsetY(val) {
				if(val >= this.ebookmarkHeight && val < this.burreyHeight) {
					// 第二阶段 吸顶阶段
					this.$refs.ebookmark.style.top =  `${-val}px` 
					this.markText = this.isBookMark ?  this.$t('book.pulldownDeleteMark') : this.$t('book.pulldownAddMark') 
					
				}else if(val >= this.burreyHeight) {
					// 第三阶段 
					this.$refs.ebookmark.style.top =  `${-val}px` 
					this.markText = this.isBookMark ?  this.$t('book.releaseDeleteMark') : this.$t('book.releaseAddMark') 
					this.markColor = this.changeColor
					this.canChange = true
				}else if(val === 0) {
					if(this.canChange) {
						this.setisBookMark({
							isBookMark: !this.isBookMark
						})
						if(this.isBookMark) {
							// 添加书签
							this.addBookMark()
						}else {
							// 删除书签
							this.removeMark()
						}
						this.canChange = false
					}
					// 第四阶段  回退到初始位置 

					// 这里使用延时 是因为回退有200ms的动画效果 为了流畅性
					this.timeOut = setTimeout(()=> {
						this.$refs.ebookmark.style.top = `${pxTorem(-this.ebookmarkHeight)}`
						this.markText = this.isBookMark ?  this.$t('book.pulldownDeleteMark') : this.$t('book.pulldownAddMark') 
						clearTimeout(this.timeOut)
					},200)
				}
			}
		},
		computed:{
			handleFixedStyle() {
				return {
					position: 'fixed',
					top:0
				}
			}
		},
		methods: {
			// 添加书签
			addBookMark() {
				const  currentLocationInfo = this.currentBook.rendition.currentLocation()
				
				if(currentLocationInfo && currentLocationInfo.start && currentLocationInfo.start.cfi) {
					const baseCfi = currentLocationInfo.start.cfi.replace(/!.*/,'')
					const startCfi = currentLocationInfo.start.cfi.replace(/.*!/,'').replace(/\)$/,'')
					const endCfi =  currentLocationInfo.end.cfi.replace(/.*!/,'').replace(/\)$/,'')
					
					let rangeCfi = `${baseCfi}!,${startCfi},${endCfi})`
					
					this.currentBook.getRange(rangeCfi).then(range => {
						let rangeText = range.toString().replace(/\s\s/g,'')
						// 获取localstorage 书签数组
						let bookMarkList = getBookObjectProperty(this.fileName,'bookMarkList')
						if(!bookMarkList) {
							bookMarkList = []
						}
						bookMarkList.push({
							cfi: currentLocationInfo.start.cfi,
							text: rangeText
						})
						
						// 存储书签数组
						setBookObjectProperty(this.fileName,'bookMarkList',bookMarkList)
						
					})
				} 
			},
			// 删除书签
			removeMark() {
				const  currentLocationInfo = this.currentBook.rendition.currentLocation()
				
				if(currentLocationInfo && currentLocationInfo.start && currentLocationInfo.start.cfi) {
					const startCfi = currentLocationInfo.start.cfi
					let bookMarkList = getBookObjectProperty(this.fileName,'bookMarkList')
					bookMarkList = bookMarkList.filter(item => item.cfi !== startCfi)
						
					// 存储书签数组
					setBookObjectProperty(this.fileName,'bookMarkList',bookMarkList)
				} 
			}
		},
		mounted() {
			this.$refs.ebookmark.style.top = `${pxTorem(-this.ebookmarkHeight)}`
			this.$refs.ebookmark.style.height = `${pxTorem(this.ebookmarkHeight)}`
			this.markText = this.isBookMark ?  this.$t('book.pulldownDeleteMark') : this.$t('book.pulldownAddMark') 
			this.markColor = this.isBookMark ?  this.changeColor : this.initColor
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
	.ebookBookmark-wrapper {
		display: flex;
		position: absolute;
		top: pxTorem(-60);
		height: pxTorem(60);
		left: 0;
		width: 100%;
		font-size: pxTorem(14);
		justify-content: flex-end;
		align-items: flex-end;
		.ebookBookmark-content {
			margin-right: pxTorem(50);
			.ebookBookmark-content-flag {
				transition: all 0.1s linear;
				&.up {
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);
				}
			}
		}
		.ebookBookmark-component {
			position: absolute;
			right: 10px;
			bottom: 0px;
		}
	}

</style>

